import React, {Component} from 'react';
import {Button, Input, Row, Table, Icon, Form} from 'antd';
import {takeOutput} from "../value";
import app from '../AppMethod';
import moment from 'moment';
import {config} from "../config";
import "../css/roleAssignment.css";

const FormItem = Form.Item;

class CheckOrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: [],
            output_match_start_time: ''
        }
    };

    columns = [
        {
            title: '商品名',
            dataIndex: 'output_detail_goods_name',
            align: 'center'
        },
        {
            title: '件数量',
            dataIndex: 'output_detail_package',
            align: 'center'
        },
        {
            title: '件数量操作',
            dataIndex: this.columns,
            align: 'center',
            render: data => {
                return (
                    <span>
                        <Button type="default" style={{display: 'inline-block', marginRight: '15px'}} size="small"
                                onClick={() => this.handlePlusJs(data.output_detail_id)}>
                            <Icon type="plus"></Icon>
                        </Button>
                        <Input style={{display: 'inline-block', width: '100px', height: '24px', textAlign: 'center'}}
                               value={data.output_detail_real_package}
                               onChange={(e) => this.handleChange(e, data.output_detail_id)}/>
                        <Button type="default" style={{display: 'inline-block', marginLeft: '15px'}} size="small"
                                onClick={() => this.handleMinusJs(data.output_detail_id)}>
                            <Icon type="minus"></Icon>
                        </Button>
                    </span>
                )
            }
        },
        {
            title: '散数量',
            dataIndex: 'output_detail_single',
            align: 'center'
        },
        {
            title: '散数量操作',
            dataIndex: this.columns,
            align: 'center',
            render: data => {
                return (
                    <span>
                        <Button type="default" style={{display: 'inline-block', marginRight: '15px'}} size="small"
                                onClick={() => this.handlePlusSs(data.output_detail_id)}>
                            <Icon type="plus"></Icon>
                        </Button>
                        <Input style={{display: 'inline-block', width: '100px', height: '24px', textAlign: 'center'}}
                               value={data.output_detail_real_single}
                               onChange={(e) => this.handleChange1(e, data.output_detail_id)}/>
                        <Button type="default" style={{display: 'inline-block', marginLeft: '15px'}} size="small"
                                onClick={() => this.handleMinusSs(data.output_detail_id)}>
                            <Icon type="minus"></Icon>
                        </Button>
                    </span>
                )
            }
        }
    ];

    render() {
        return (
            <div style={{background: '#fff', paddingBottom: '60px'}}>
                <div style={{background: '#fff'}}>
                    <div className="checkOrderDetailTitle">
                        对单详情
                        <Button onClick={() => this.handleFinish()}
                                type="primary" style={{
                            float: 'right',
                            marginTop: '18px',
                            marginRight: '50px'
                        }}>完成</Button>
                    </div>
                </div>
                <div style={{background: '#fff',paddingTop:60}}>
                    <Row>
                        <Table
                            columns={this.columns}
                            rowKey={record => record.output_detail_id}
                            loading={this.state.loading}
                            dataSource={this.state.data}
                            pagination={false}
                        >
                        </Table>
                    </Row>
                </div>
            </div>
        )
    };

    componentDidMount() {
        let date = new Date();
        let dateNow = date.toString();
        let dateNowFormat = moment(dateNow).format('YYYY-MM-DD HH:mm:ss');
        this.setState({output_match_start_time: dateNowFormat});
        this.handleGetDetailById();
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 根据output_id获取商品列表
     */
    handleGetDetailById() {
        let id = this.props.match.params.id;
        app.post(takeOutput.SEARCH_OUTPUTDETAIL, {output_id: id}).then((result) => {
            if (result.code === 1) {
                let data = result.data.output_detail;
                this.setState({data});
            } else {
                app.alert(result.msg);
            }
        })
    }

    /**
     * 增加件数量操作
     * @param id
     */
    handlePlusJs(id) {
        let data = this.state.data;
        for (let i = 0; i < data.length; i++) {
            if (data[i].output_detail_id == id) {
                data[i].output_detail_real_package = Number(data[i].output_detail_real_package) + 1;
            }
        }
        this.setState({data: data});
    };

    /**
     * 减少件数量操作
     * @param id
     */
    handleMinusJs(id) {
        let data = this.state.data;
        for (let i = 0; i < data.length; i++) {
            if (data[i].output_detail_id == id) {
                let num = Number(data[i].output_detail_real_package) - 1;
                if (num < 0) {
                    num = 0;
                }
                data[i].output_detail_real_package = num;
            }
        }
        this.setState({data: data});
    };

    /**
     * 增加散数量操作
     * @param id
     */
    handlePlusSs(id) {
        let data = this.state.data;
        for (let i = 0; i < data.length; i++) {
            if (data[i].output_detail_id == id) {
                data[i].output_detail_real_single = Number(data[i].output_detail_real_single) + 1;
            }
        }
        this.setState({data: data});
    };

    /**
     * 减少散数量操作
     * @param id
     */
    handleMinusSs(id) {
        let data = this.state.data;
        for (let i = 0; i < data.length; i++) {
            if (data[i].output_detail_id == id) {
                let num = Number(data[i].output_detail_real_single) - 1;
                if (num < 0) {
                    num = 0;
                }
                data[i].output_detail_real_single = num;
            }
        }
        this.setState({data: data});
    };

    /**
     * 处理件数量输入框变化事件
     * @param e
     * @param id
     */
    handleChange(e, id) {
        let value = e.target.value;
        if (value.length <= 0) {
            value = 0;
        } else {
            let result = app.checkIsNum(value);
            if (!result) {
                app.alert('请输入正数', 'error', 2);
                return;
            }
        }
        let data = this.state.data;
        for (let i = 0; i < data.length; i++) {
            if (data[i].output_detail_id == id) {
                data[i].output_detail_real_package = value;
            }
        }
        this.setState({data: data});
    };

    /**
     * 处理散数量输入框变化事件
     * @param e
     * @param id
     */
    handleChange1(e, id) {
        let value = e.target.value;
        if (value.length <= 0) {
            value = 0;
        } else {
            let result = app.checkIsNum(value);
            if (!result) {
                app.alert('请输入正数', 'error', 2);
                return;
            }
        }
        let data = this.state.data;
        for (let i = 0; i < data.length; i++) {
            if (data[i].output_detail_id == id) {
                data[i].output_detail_real_single = value;
            }
        }
        this.setState({data: data});
    }

    /**
     * 处理完成对单事件
     */
    handleFinish() {
        const _this = this;
        let employee_id = app.getData('employee_id');
        let id = this.props.match.params.id;
        let data = this.state.data;
        let tempData = [];
        for (let i = 0; i < data.length; i++) {
            let oneData = {};
            oneData.output_detail_id = data[i].output_detail_id;
            oneData.output_detail_real_package = data[i].output_detail_real_package;
            oneData.output_detail_real_single = data[i].output_detail_real_single;
            tempData.push(oneData);
        }
        let commitData = {
            output_id: id,
            employee_id: employee_id,
            output_match_start_time: this.state.output_match_start_time,
            output_detail: JSON.stringify(tempData)
        };
        console.log(commitData);
        app.post(takeOutput.FINISH_MATCHOUTPUTDETAIL, commitData).then((result) => {
            if (result.code === 1) {
                app.alert('对单完成！', 'success', 3);
                app.goBack(_this);
            } else {
                app.alert(result.msg, 'error', 3);
            }
        })

    };
};

export default CheckOrderDetail;